<template>
  <div>
    <h1 v-border="color">test</h1>
    <!-- 测试骨架屏 -->
    <XtxSkeleton width="100" height="30" background="gold"/>
    <XtxSkeleton width="100" height="30" background="red"/>
    <XtxSkeleton width="100" height="30" background="green"/>
    <XtxSkeleton width="100" height="30" background="blue"/>
    <hr>
    <HomePanel title="来了老弟" sub="嗨嗨嗨">
      <template #right>
        <span>右边</span>
      </template>
      <p>主体内容区域</p>
    </HomePanel>
  </div>
</template>

<script>
import request from '@/utils/request'
import { onMounted, ref } from 'vue'
import HomePanel from '@/views/Home/components/home-panel.vue'
export default {
  components: {
    HomePanel
  },
  setup () {
    const color = ref('blue')
    const getNew = async () => {
      const res = await request('/home/new', 'get')
      console.log('后台数据：', res)
    }
    onMounted(() => {
      getNew()
    })
    return { color }
  }
}
</script>

<style lang="scss" scoped>

</style>
